<template>
	<div ref="upload" style="width: 100%; height: 100%;">
		<a-upload ref="uploadDom" :style="{ width: width, height: height, padding: 0 }" @change="handleSuccess"
			:file-list="config.fileList" :headers="config.header" :data="props.data" :action="config.baseUrl"
			type="drag" :accept="config.accept" @beforeUpload="beforeUpload" :showUploadList="false" :limit="1"
			:image-preview="true" list-type="picture" :multiple="true" :disabled="disabled" draggable>
			<template #upload-button>
				<img v-if="!utils.isEmpty(thumb)" :src="thumb" :style="{ width: width, height: height }" />
				<div v-else class="upload-area">
					<a-link><icon-upload style="font-size: 30px;" /></a-link>
					<a-typography-text>选择要上传的文件</a-typography-text>
				</div>
			</template>

		</a-upload>
		<cropperImgVue :cropperImg="url" @getCrofile="getCrofile" @clear="clear" :optionWidth="props.optionWidth"
			:optionHeigth="props.optionHeigth" :fixedNumber="props.fixedNumber" />
	</div>

</template>
 
<script lang="ts">
import { onBeforeMount, ref, toRefs, watch } from 'vue';
import utils from "@/utils/utils";
import request, { getHeader, getUploadUrl, doUp } from "@/config/request";
import cropperImgVue from './cropperImg.vue'
import aesUtils from '@/utils/aesUtils';
export default {
	name: 'upload',
	components: { cropperImgVue },
	setup(props, { emit }) {
		const { thumb } = toRefs(props);
		const loading = ref(false);
		const isAction = ref(false);
		const urls = ref([]);
		const limit = ref(1);
		const upload = ref();
		const uploadDom = ref();
		const config = ref({
			header: getHeader(),
			baseUrl: getUploadUrl(),
			fileList: [],
			listType: 'picture-card', // 上传成功展示样式 默认展示图片
			accept: 'image/*' // 上传类型限制
		});
		const url = ref('');
		const img = ref();
		const handleSuccess = (file: any) => {
			return false;
		};
		const beforeUpload = (file: File): Promise<boolean> => {
			url.value = URL.createObjectURL(file)
			return new Promise(() => {
				return false;
			})
		};
		const getCrofile = (file: any) => {
			loading.value = true;
			utils.showSpin();
			doUp(file).then(ret => {
				let res = aesUtils.decrypt(ret.data);
				img.value = res;
				loading.value = false;
				url.value = ''
				emit('success', res);
			}).catch(err => {
				loading.value = false;
			})
		};
		const clear = () => {
			url.value = '';
		}
		return { loading, thumb, isAction, urls, limit, location, config, url, img, upload, uploadDom, props, handleSuccess, beforeUpload, getCrofile, clear, utils };
	},
	props: {
		thumb: {
			type: String,
			default: () => { return ""; }
		},
		value: {
			type: Array,
			default: () => []
		}, // 上传成功图片地址
		disabled: {
			type: Boolean,
			default: false
		}, // 是否禁用
		action: {
			type: String,
			default: ''
		}, // 上传接口地址
		data: {
			type: Object,
			default: () => {
				return {
					fileType: 1
				}
			}
		}, // 给后端带的参数
		type: {
			type: String,
			default: 'image'
		}, // 上传类型 image/file
		optionWidth: {
			// 裁剪框宽
			default: 900
		},
		optionHeigth: {
			// 裁剪高宽
			default: 600
		},
		width: {
			type: String,
			default: () => {
				return '100%'
			}
		},
		height: {
			type: String,
			default: () => {
				return '100%'
			}
		},
		fixedNumber: {
			default: () => [1.5, 1]
		}
	},
	watch: {
		thumb(val) {
			this.img = val;
		}
	},
}
</script>
 
<style lang="less" scoped>
.upload-area {
	background-color: var(--color-fill-2);
	color: var(--color-text-1);
	border: 1px dashed var(--color-fill-4);
	height: 158px;
	width: 100%;
	border-radius: 2;
	text-align: center;
	margin: 10px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>